<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
	
		<title>
			Sample: Simple Container
		</title>
	
		<link href="StyleSheets/gadgets.css" rel="stylesheet"/>
		<link href="StyleSheets/container.css" rel="stylesheet"/>
		<link href="StyleSheets/temp_styles.css" rel="stylesheet"/>
		
		<script type="text/javascript" src="Scripts/util.js"></script>
		<script src="Scripts/container/json.js" type="text/javascript"></script>
		<script src="Scripts/container/ifpc.js" type="text/javascript"></script>
		<script src="Scripts/container/cookies.js" type="text/javascript"></script>
		<script src="Scripts/container/rpc.js" type="text/javascript"></script>
		<!-- <script src="Scripts/yui/yahoo/yahoo-min.js" type="text/javascript"></script>
		<script src="Scripts/yui/dom/dom-min.js" type="text/javascript"></script>
		<script src="Scripts/yui/event/event-min.js" type="text/javascript"></script>
		<script src="Scripts/yui/utilities/utilities.js" type="text/javascript"></script>
		<script src="Scripts/yui/dragdrop/dragdrop-min.js" type="text/javascript"></script> -->
		<script src="Scripts/container/gadgets.js" type="text/javascript"></script> 

	    <style type="text/css">
		<!--
		.style1 {color: #55A3FF}
		-->
		</style>
	</head>
	
	<body onload="init()">
		<h2>Sample:&hellip; Simple Container</h2>
		 
		<div class="column" id="sort1"><p></p></div>
		<div class="column" id="sort2"><p></p></div>
		<div class="column" id="sort3"><p></p></div>

		<script type="text/javascript">
			gadgets.container.setParentUrl('rpc_relay.html');
			var specUrl0 = 'http://abowman.googlepages.com/spider.xml';
			var specUrl1 = 'http://www.labpixies.com/campaigns/todo/todo.xml';
			var specUrl2 = 'http://www.google.com/ig/modules/aue07otr.xml';
			var specUrl3 = 'http://www.rankquest.com/RankQuest-SEO-Gadget.xml';
			var specUrl4 = 'http://localhost/iGoogle/xml/SetTitle.xml';
			
			// This container lays out and renders gadgets itself.
			
			function renderGadgets() {
					temp++;
  					var gadget1 = gadgets.container.createGadget({widgetId: temp, specUrl: specUrl2, title: "Neo", logo: "/iGoogle/StyleSheets/edit.png" });
  					gadgets.container.addGadget(gadget1,temp);
  					gadget1.setServerBase('http://localhost:8080/gadgets/'); 
  					gadgets.container.renderGadget(gadget1);
					//new YAHOO.example.DDList(temp.toString());
				
			};
			function init() {
					temp = 0;
  					gadgets.container.layoutManager = new gadgets.SortableLayoutManager('div.column');
					gadgets.container.setParentUrl('rpc_relay.html');
  					
			  };
		</script>
		
		<!-- <script type="text/javascript">
			(function() {
			
			var Dom = YAHOO.util.Dom;
			var Event = YAHOO.util.Event;
			var DDM = YAHOO.util.DragDropMgr;
			
			YAHOO.example.DDApp = {
			    init: function() {
			        new YAHOO.util.DDTarget("#sort1");
			        new YAHOO.util.DDTarget("#sort2");
			        new YAHOO.util.DDTarget("#sort3");
			
			    }
			
			};
			
			YAHOO.example.DDList = function(id, sGroup, config) {
			    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
			
			    this.logger = this.logger || YAHOO;
			    var el = this.getDragEl();
				
			    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
			
			    this.goingUp = false;
			    this.lastY = 0;
			};
			
			YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
			
			    startDrag: function(x, y) {
			        this.logger.log(this.id + " startDrag");
			
			        // make the proxy look like the source element
			        var dragEl = this.getDragEl();
			        var clickEl = this.getEl();
			        Dom.setStyle(clickEl, "visibility", "hidden");
			
			        dragEl.innerHTML = clickEl.innerHTML;
			
			        //Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
			        //Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
			        //Dom.setStyle(dragEl, "border", "2px solid gray");
			    },
			
			    endDrag: function(e) {
			
			        var srcEl = this.getEl();
			        var proxy = this.getDragEl();
			
			        // Show the proxy element and animate it to the src element's location
			        Dom.setStyle(proxy, "visibility", "");
			        var a = new YAHOO.util.Motion( 
			            proxy, { 
			                points: { 
			                    to: Dom.getXY(srcEl)
			                }
			            }, 
			            0.2, 
			            YAHOO.util.Easing.easeOut 
			        )
			        var proxyid = proxy.id;
			        var thisid = this.id;
			
			        // Hide the proxy and show the source element when finished with the animation
			        a.onComplete.subscribe(function() {
			                Dom.setStyle(proxyid, "visibility", "hidden");
			                Dom.setStyle(thisid, "visibility", "");
			            });
			        a.animate();
			    },
			
			    onDragDrop: function(e, id) {
			
			        // If there is one drop interaction, the li was dropped either on the list,
			        // or it was dropped on the current location of the source element.
			        if (DDM.interactionInfo.drop.length === 1) {
			
			            // The position of the cursor at the time of the drop (YAHOO.util.Point)
			            var pt = DDM.interactionInfo.point; 
			
			            // The region occupied by the source element at the time of the drop
			            var region = DDM.interactionInfo.sourceRegion; 
			
			            // Check to see if we are over the source element's location.  We will
			            // append to the bottom of the list once we are sure it was a drop in
			            // the negative space (the area of the list without any list items)
			            if (!region.intersect(pt)) {
			                var destEl = Dom.get(id);
			                var destDD = DDM.getDDById(id);
			                destEl.appendChild(this.getEl());
			                destDD.isEmpty = false;
			                DDM.refreshCache();
			            }
			
			        }
			    },
			
			    onDrag: function(e) {
			
			        // Keep track of the direction of the drag for use during onDragOver
			        var y = Event.getPageY(e);
			
			        if (y < this.lastY) {
			            this.goingUp = true;
			        } else if (y > this.lastY) {
			            this.goingUp = false;
			        }
			
			        this.lastY = y;
			    },
			
			    onDragOver: function(e, id) {
			    
			        var srcEl = this.getEl();
			        var destEl = Dom.get(id);
			
			        // We are only concerned with list items, we ignore the dragover
			        // notifications for the list.
			        if (destEl.nodeName.toLowerCase() == "div") {
			            var orig_p = srcEl.parentNode;
			            var p = destEl.parentNode;
						
			            if (this.goingUp) {
			                p.insertBefore(srcEl, destEl); // insert above
			            } else {
			                p.insertBefore(srcEl, destEl.nextSibling); // insert below
			            }
			
			            DDM.refreshCache();
			        }
			    }
			});
			
			Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
			
			})();
		</script> -->
		<span class="style1"></span>
		<input type="button" value="New" onclick="renderGadgets(); return false;">
	</body>
</html>
